<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="footer">
<head>
    <meta charset="UTF-8">
    <title>txjw</title>
</head>
<script th:src="@{/js/jquery/jquery-1.11.1.min.js}"></script>
<script th:src="@{/js/jquery/jquery-ui.min.js}"></script>
<script th:src="@{/js/util.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/md5.js}"></script>
<script th:src="@{/js/mainsite/interface/interface.js}"></script>
<script th:src="@{/js/mainsite/mainsiteservice.js}"></script>
<style>
    .func{
        margin:0 auto;height: 60px;width: 400px;position:absolute;
        top:300px;
        left: 600px;

    }
    .loginform{
        margin:0 auto;width:800px;height:600px;position:absolute;
        top:370px;
        left: 600px;
    }
    .loginbutton{
        height: 50px;width: 400px;color: #cccccc;background-color: darkgreen;font-size: 20px;text-align: center;
    }
    .register{
        margin:0 auto;width:800px;height:600px;position:absolute;
        top:370px;
        left: 600px;
    }
    .confirm{
        height: 40px;width: 400px;color: #cccccc;background-color: darkgreen;font-size: 15px;text-align: center;
    }
</style>
<body>
    <div  class="container" style="position:relative;">
        <img th:src="@{/img/login3.jpg}" height="1080px" width="1920px">
        <div class="func">
            <button style="font-size: 15px;height:40px;width: 197px;background-color: #2E5380;border: none;color: #cccccc;"
                    onclick="change(1);">登录</button>
            <button style="font-size: 15px;height:40px;width: 197px;background-color: #555555;border: none;color: #cccccc;"
                    onclick="change(2);">注册</button>
        </div>
        <div class="loginform" style="display: block">
            <div>
                <div style="height: 80px">
                    <input style="height: 35px;width: 400px" id="login_user" placeholder="用户名">
                </div>
                <div style="height: 80px">
                    <input style="height: 35px;width: 400px" type="password" id="login_password" placeholder="密码">
                </div>
            </div>
            <div style="height: 40px;width:400px;text-align: right;">
                <a target="_blank">忘记密码？</a>
            </div>
            <div >
                <button class="loginbutton" onclick="login();">登录</button>
            </div>

        </div>
        <div class="register" style="display: none">
            <div>
                <div style="height: 80px">
                    <input style="height: 35px;width: 400px" id="register_user" placeholder="用户名">
                </div>
                <div style="height: 80px">
                    <input style="height: 35px;width: 400px" type="password" id="register_password" placeholder="密码">
                </div>
                <div style="height: 80px">
                    <input style="height: 35px;width: 400px" type="password" id="register_confirm" placeholder="确认密码">
                </div>
            </div>
            <div style="height: 50px;width: 400px">
                <button class="confirm" onclick="registe();">立即注册</button>
            </div>

        </div>
    </div>
</body>
<script th:inline="javascript" type="text/javascript">
    var para = [[${para}]];//接受参数

    function change(sing) {
        if(sing == 2){
            $(".loginform").css("display","none");
            $(".register").css("display","block");
        }
        if(sing == 1){
            $(".loginform").css("display","block");
            $(".register").css("display","none");
        }
    }

    function registe() {
        service.register();
    }
    function login() {
        service.login();
    }
</script>
</html>